<template>
  <div class="login">
    <div class="changetou">{{ changeHeader }}</div>
    <div class="erolls">
      <div v-for="(item, i) in imgs" :key="item">
        <img :src="item" alt="" @click="changeTouxiang(i)" />
      </div>
    </div>
    <div class="biaodan">
      <div>
        <input
          type="text"
          placeholder="请输入您的电话号码"
          v-model="phone"
          autocomplete="off"
        />
      </div>
      <div>
        <input
          type="text"
          placeholder="请输入用户名"
          v-model="username"
          autocomplete="off"
        />
      </div>
      <div>
        <input
          type="password"
          placeholder="密码:大小字母,特殊符号,数字,最少3种,6长度"
          v-model="userpwd"
          autocomplete="off"
        />
      </div>
      <div id="isUser">
        <input type="checkbox" v-model="isuser" />我已阅读并且同意<span
          >隐私政策</span
        >
      </div>

      <div>
        <button @click="logins">注册</button>
      </div>
    </div>

    <div class="title">{{ title }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgs: [
        require("@/icon/head/1.jpeg"),
        require("@/icon/head/2.png"),
        require("@/icon/head/3.jpg"),
        require("@/icon/head/4.jpg"),
      ],
      username: "",
      userpwd: "",
      isuser: false,
      phone: "",
      title: "",
      changeHeader: "你可以选择一个头像",
      headerImg: 1,
    };
  },
  methods: {
    changeTouxiang(i) {
      this.changeHeader = "你选择了第" + (i + 1) + "个图作为头像";
      this.headerImg = i + 1;
    },
    logins() {
      let resphone =
        /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
      //大小写字母，特殊符号，数字，最少包含3中，最少6位
      let resPwd =
        /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\W_!@#$%^&*`~()-+=]+$)(?![0-9\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\W_!@#$%^&*`~()-+=]/;
      if (
        resphone.test(this.phone) &&
        resPwd.test(this.userpwd) &&
        this.username.length > 2 &&
        this.isuser
      ) {
        this.title = "";
        //注册
        this.$axios
          .post(`http://175.178.117.99:8004/users/createAccount`, {
            name: this.username,
            account: this.phone,
            password: this.userpwd,
            role:this.headerImg,
          })
          .then((result) => {
            
            this.title = result.data.message;
            if (result.data.code == 200) {
             
              alert("注册成功");
              this.$router.push("/");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.title = "您输入的格式不正确";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.erolls {
  width: 335rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  > div {
    margin-top: 20rem;
    img {
      width: 60rem;
      height: 60rem;
      border-radius: 50%;
    }
  }
}
.login {
  min-height: 100vh;
  padding-top: 30rem;
  .title {
    text-align: left;
    color: red;
    font-size: 15rem;
    margin-top: 15rem;
    margin-left: 20rem;
  }
  .changetou {
    font-size: 16rem;
    color: @color4;
  }
}
.biaodan {
  width: 335rem;
  margin: 0 auto;
  padding-top: 15rem;
  > div {
    margin-top: 15rem;
    color: @color4;
    font-size: 16rem;
    input {
      width: 275rem;
      height: 45rem;
      padding-left: 30rem;
      color: @color4;
      outline: none;
      background-color: @color2;
      border: none;
      border-bottom: 1px solid @color4;
    }
    button {
      width: 305rem;
      height: 45rem;
      border-radius: 15rem;
      border: none;
      background-color: @color1;
      color: @color4;
    }
  }

  #isUser {
    text-align: left;
    margin-left: 25rem;
    display: flex;
    align-items: center;
    input {
      width: 20rem;
      height: 20rem;
      color: @color4;
      margin-right: 5rem;
    }
    span {
      color: @color1;
    }
  }
}
</style>